import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router' ; 
import { Input,Table,Switch,Button  } from 'antd';
import { fetchItembanks,deleteItembank,enableItembank,disableItembank } from "../../../actions/itembankActions";

const Search = Input.Search;
const { Column } = Table;

import './style.css' ;

class AdminItembankPage extends React.Component{
    fetchItembanks = () => {
        this.props.fetchItembanks().then(
            (res) =>{ console.log("fetch itembanks success ");  },
            (err) => { console.log(err);  }
        );
    }

    componentDidMount(){
         this.fetchItembanks();
    }
    
    deleteItembank(bankid){
        this.props.deleteItembank(bankid).then(
            (res) =>{  },
        )
    }

    onStatusChange(bankid){
        if ( this.checked ){  // status is disable
            this.props.disableItembank(bankid).then(
                 (res) =>{ console.log("disable success");  },
                 (err) => { console.log(err);  }
            );
        }else {
            this.props.enableItembank(bankid).then(
                 (res) =>{ console.log("enable success");  },
                 (err) => { console.log(err);  }
            );
        }
        this.checked = !this.checked;
    }

    render(){
        return (
            <div className="itembank-container" >
                <div className="users-selector-actions" >
                    <Search
                        placeholder="input search text"
                        style={{ width: 400 }}
                        onSearch={value => console.log(value)}
                    />
                    <Button type="primary"> <Link to="/admin/itembank/new" > 创建 </Link> </Button>
                </div>
                <div>
                    <Table rowKey={record => record.id} dataSource={this.props.data} >
                        <Column
                            title="ID"
                            dataIndex="id"
                            key="id"
                            render={ id => <Link to={`/admin/itembank/${id}`} > { id }  </Link> }
                        />
                        <Column
                            title="题库名"
                            dataIndex="name"
                            key="name"
                        />
                        <Column
                            title="状态（启用/禁用）"
                            dataIndex="disable"
                            key="disable"
                            render={ (text, record) => {
                                return <Switch checkedChildren={'启用'} unCheckedChildren={'禁用'} defaultChecked={!record.disable}
                                           onChange={this.onStatusChange.bind(this,record.ID)}/>
                                }
                            }
                        />
                        <Column
                            title="公开/指定"
                            dataIndex="limited"
                            key="limited"
                            render={ (text, record) => {
                                        if (record.limited) {
                                            return <div> 否 </div>
                                        }else {
                                            return <div> 是 </div>
                                        }
                            }
                            }
                        />

                        <Column 
                            title="Actions"
                            render={ (text, record) => (
                                <span>
                                    <a href="#" onClick={this.deleteItembank.bind(this,record.id)}>删除</a>
                                    <span className="ant-divider" />
                                </span>
                            )
                            }
                        />
                  </Table>
                </div>

            </div>
        )
    }
}

const mapStateToProps = (state) => {
  return {
     data: state.itembank.itembanks,
   }
}

AdminItembankPage.propTypes = {
    fetchItembanks: React.PropTypes.func.isRequired,
    deleteItembank:React.PropTypes.func.isRequired,
    enableItembank:React.PropTypes.func.isRequired,
    disableItembank:React.PropTypes.func.isRequired,
};

export default connect(mapStateToProps,{fetchItembanks,deleteItembank,enableItembank,disableItembank})(AdminItembankPage);